<template>
  <div v-show="!isMain && isView" class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail">
      <px-button style="margin: 16px 0 24px" type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">盘点名称</div>
            <div class="text">{{ formValue.groupName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">科室</div>
            <div class="text">{{ formValue.classNameDesc }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">备注</div>
            <div class="text">{{ formValue.remark }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">工具盘点列表</div>
      <px-table :data="formValue.toolInfoDTOList" class="equip-table" size="small" height="calc(100vh - 400px)" border>
        <px-table-column prop="toolCode" label="工具编码" min-width="160" show-overflow-tooltip />
        <px-table-column prop="toolName" label="工具名称" min-width="160" show-overflow-tooltip />
        <px-table-column prop="toolStatusDesc" label="工具状态" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <px-tag
              effect="plain"
              :style="{
                color: 'rgba(0, 0, 0, 0.8)',
                border: `1px solid ${tagBorderColorList[scope.row.toolStatus]}`,
                backgroundColor: `${tagBgColorList[scope.row.toolStatus]}`
              }"
            >
              {{ scope.row.toolStatusDesc }}
            </px-tag>
          </template>
        </px-table-column>
        <px-table-column prop="toolCategoryDesc" label="工具分类" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolUnitDesc" label="工具单位" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolModel" label="型号/规格" min-width="120" show-overflow-tooltip />
        <px-table-column prop="brandVal" label="品牌" min-width="120" show-overflow-tooltip />
        <px-table-column prop="toolPosition" label="工具位置" min-width="160" show-overflow-tooltip />
      </px-table>
    </px-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { getToolGroup } from "@/api/equip/toolManage";
import { computed, ref, watch } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "groupId"]);

// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);

const formValue = ref<Record<string, any>>({});

const tagBorderColorList = {
  0: "#4CCBA1",
  1: "#F37272",
  2: "#F7B648",
  3: "#7997A8"
};

const tagBgColorList = {
  0: "#E8F8F3",
  1: "#FEECEC",
  2: "#FEF5E6",
  3: "#F7F7F7"
};

// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    formValue.value = await getToolGroup(props.groupId);
  }
});
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

.view-equip-detail-wrap {
  position: relative;
  width: 100%;
  height: 100%;

  .view-equip-detail {
    height: calc(100vh - 126px);
  }

  .info-form-btns {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 68px;
    padding-right: 34px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 16%);
  }
}
</style>
